<template>
  <view class="coupon-card" :class="{ disabled: coupon.isReceive || isExpired }">
    <view class="coupon-card-info">
      <view class="left">
        <view class="amount">
          <template v-if="coupon.couponType === 1">
            <text class="symbol">¥</text>
            {{ coupon.amount }}
          </template>
          <template v-else>{{ coupon.discount }}折</template>
        </view>
        <text class="condition">满{{ coupon.conditionAmount }}可用</text>
      </view>

      <view class="right">
        <view class="info">
          <text class="name">{{ coupon.name }}</text>
          <text class="time">有效期至 {{ formatDate(coupon.endTime) }}</text>
          <text class="desc">{{ coupon.description }}</text>
        </view>
        <view class="info-buttom">
          <wd-tag type="primary">{{ getStatusText }}</wd-tag>
          <wd-tag
            style="margin-left: 50rpx"
            v-if="coupon.isReceive === 0"
            type="warning"
            size="small"
            @click="$emit('receive', coupon.id)"
          >
            立即领取
          </wd-tag>
          <wd-tag style="margin-left: 50rpx" v-if="coupon.isReceive === 1" size="small">
            已领取
          </wd-tag>
        </view>
      </view>
    </view>
    <!-- <view class="goods-card" v-if="coupon.rangeType === 3">
      <wd-collapse v-model="value">
        <wd-collapse-item name="goodsCard">
          <template #title="{ expanded, disabled, isFirst }">
            <view class="header">
              <text style="color: red">限定商品</text>
              <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
            </view>
          </template>
        </wd-collapse-item>
      </wd-collapse>
      <scroll-view scroll-x></scroll-view>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import type { CouponInfoVo } from '@/service/goods/coupon/coupon.d'

const props = defineProps<{
  coupon: CouponInfoVo
  disabled?: boolean
  pageType?: string
}>()

const formatDate = (dateStr: string) => {
  return dateStr.slice(0, 10)
}

const isExpired = computed(() => {
  return new Date() > new Date(props.coupon.endTime)
})

const getStatusText = computed(() => {
  if (props.coupon.isUsed === 1) return '已使用'
  return isExpired.value ? '已过期' : '未使用'
})
</script>

<style lang="scss" scoped>
.coupon-card {
  position: relative;

  margin-bottom: 20rpx;
  overflow: hidden;

  border-radius: 20rpx;

  &.disabled {
    filter: grayscale(0.8);
    opacity: 0.8;
  }
  .coupon-card-info {
    display: flex;
    padding: 30rpx;
    background: linear-gradient(135deg, #fff5f5, #ffac86d6);
  }
  .goods-card {
    padding: 0 30rpx;
    background-color: #eaeaea;
  }

  .left {
    width: 200rpx;
    text-align: center;
    border-right: 2rpx dashed #e4393c;

    .amount {
      font-size: 48rpx;
      font-weight: bold;
      color: #e4393c;
      .symbol {
        font-size: 32rpx;
      }
    }

    .condition {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
  }

  .right {
    flex: 1;
    padding-left: 30rpx;
    .info-buttom {
      display: flex;
      justify-content: space-between;
    }
    .name {
      font-size: 32rpx;
      color: #333;
    }

    .time {
      display: block;
      margin: 10rpx 0;
      font-size: 24rpx;
      color: #666;
    }

    .desc {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
